<template>
  <div class="SK-community-container">
    <div class="SK-community-content SK-community-posts-detail-container">
      <div class="mian-content">
        <div class="SK-community-middle">
          <div class="SK-community-post-content">
            <div class="post-header">
              <h1>【{{ postDetail.username }}的帖子】</h1>
            </div>
            <div class="post-detail">
              <p
                v-show="postDetail.username == userInfo.name"
                @click="deleteMypost"
              >
                &nbsp;&nbsp删除
              </p>
              <p class="">发表于{{ postDetail.content_time }}</p>
            </div>
            <div class="post-content">
              <div class="dangerously_html_container">
                {{ postDetail.content_post }}
              </div>
            </div>
            <div class="post-content">
              <div class="dangerously_html_container">
                <img :src="postDetail.url" />
              </div>
            </div>
            <div class="post-thumb-up">
              <div class="thumb_up_con">
                <button class="dianzan_con" @click="update">
                  <i
                    class="iconfont icon-icon"
                    v-show="postDetail.likecontentstate == 1"
                  ></i>
                  <i
                    class="iconfont icon-dianzan"
                    v-show="postDetail.likecontentstate == 2"
                  ></i>
                </button>
                <p>{{ postDetail.likecontentnum }}人已点赞</p>
              </div>
            </div>
          </div>
          <div class="SK-community-comment-block-wrapper">
            <div class="SK-community-comment-block">
              <div class="comment-wrapper">
                <div class="textarea-block-wrapper">
                  <div style="position: relative">
                    <div class="SK-button">
                      <span class="submit" @click="comment">评论</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="SK-community-talk-comment-item-container"
              v-for="(post, index) in followList"
              :key="post.f_id"
            >
              <div class="SK-avatar-wrapper">
                <a target="_blank"
                  ><img
                    :src="post.follow_content_userpage"
                    v-if="post.follow_content_userpage != null" /><img
                    v-else
                    :src="noUserpage"
                /></a>
              </div>
              <div class="SK-comment-content">
                <div class="user-name">
                  <a target="_blank">{{ post.follow_username }}</a
                  ><span class="reply_time">{{
                    post.follow_content_time
                  }}</span>
                </div>
                <div class="dangerously_html_container content">
                  {{ post.follow_content_post }}
                </div>
                <div class="action">
                  <button class="like" @click="changeLikes(post)">
                    <i
                      class="iconfont icon-icon"
                      v-show="post.follow_content_likestate == 1"
                      style="font-size: 16px"
                    ></i>
                    <i
                      class="iconfont icon-dianzan"
                      v-show="post.follow_content_likestate == 2"
                      style="font-size: 16px"
                    ></i
                    >{{ post.follow_content_likenum }}
                  </button>
                </div>
              </div>
            </div>
            <div class="talk-list-bottom">已到达底部</div>
          </div>
        </div>
        <div class="SK-community-right">
          <div class="SK-community-user-card">
            <div class="SK-user-detail-block">
              <div class="avatar-line">
                <a class="avatar-block" href="/users/1982836"
                  ><div class="avatar-block_img user_avatar_cpmponent">
                    <div class="user_avatar_block">
                      <img
                        class="avatar"
                        :src="postDetail.page"
                        style="width: 70px; height: 70px; border-radius: 50%"
                      />
                    </div></div></a
                ><a class="name" title="">{{ postDetail.username }}</a>
              </div>
            </div>
          </div>
          <div></div>
        </div>
      </div>
    </div>
    <el-dialog title="发表评论" :visible.sync="dialogFormVisible">
      <el-form
        style="width: 80%"
        :model="replyForm"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item prop="content_post" label="评论内容" label-width="100px">
          <el-input
            type="textarea"
            autocomplete="off"
            v-model="replyForm.follow_content_post"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addReply('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import pic from "../../assets/images/default.jpeg";
export default {
  name: "PostDetail",
  data() {
    return {
      replyForm: { follow_content_post: "" },
      dialogFormVisible: false,
      userInfo: {
        name: "",
        money: 0,
        page: "",
        phone: "",
        sex: "",
        state: "",
        password: "",
      },
      rules: {
        follow_content_post: [{ required: true, message: "请输入评论内容" }],
      },
      noUserpage: pic,
    };
  },
  mounted() {
    this.getPostDetail();
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      if (this.userInfo.page == null) {
        this.userInfo.page = pic;
      }
    },
    async getPostDetail() {
      try {
        let id = this.$route.query.contentid;
        let username = this.$route.query.username;
        await this.$store.dispatch("getDetailPost", {
          contentid: id,
          username: username,
        });
      } catch (error) {
        alert(error.message);
      }
    },
    // 更新帖子的点赞
    async update() {
      try {
        let id = this.$route.query.contentid;
        let username = this.$route.query.username;
        await this.$store.dispatch("getlikePost", {
          contentid: id,
          username: username,
        });
        this.getPostDetail();
      } catch (error) {
        alert(error.message);
      }
    },
    // 更新评论的点赞
    async changeLikes(post) {
      try {
        let id = post.f_id;
        let username = this.$route.query.username;
        await this.$store.dispatch("getLikeComment", {
          f_id: id,
          username: username,
        });
        this.getPostDetail();
      } catch (error) {
        alert(error.message);
      }
    },
    comment() {
      if (this.userInfo.state == 4) {
        alert("你最近有违规行为,禁止评论!");
      } else {
        this.dialogFormVisible = true;
        // 每次点开都清空
        this.replyForm = { follow_content_post: "" };
      }
    },
    addReply(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          let id = this.$route.query.contentid;
          let username = this.$route.query.username;
          let result = await this.$store.dispatch("replyPost", {
            content_id: id,
            follow_username: username,
            follow_content_post: this.replyForm.follow_content_post,
          });
          if (result == "ok") {
            this.$message.success("评论成功");
            this.getPostDetail();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async deleteMypost() {
      try {
        let id = this.$route.query.contentid;
        await this.$store.dispatch("deletemyPost", { content_id: id });
        this.$message.success("删帖成功");
        this.$router.push("/center");
      } catch (error) {
        alert(error.message);
      }
    },
  },
  computed: {
    ...mapState({
      postDetail: (state) => state.community.postDetail,
      followList: (state) => state.community.postDetail.followContentUtilList,
    }),
  },
};
</script>

<style>
@import "../../assets/css/postdetail.css";
</style>
